<template>
  <div>
    <div style="height:400px">
      <el-table
        :data="items"
        stripe
        :header-cell-style="{
          background: '#B6C4D3',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="teacherId" label="工号" fit />
        <el-table-column prop="name" label="姓名" fit />
        <el-table-column prop="male" label="性别" fit />
        <el-table-column prop="departmentName" label="所属院系" fit />
        <el-table-column prop="academicTitle" label="职称" fit />
        <el-table-column prop="phoneNumber" label="联系方式" fit />
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <el-button @click.native.prevent="modify(scope.row)" type="text">
              修改
            </el-button>
            <el-button
              @click.native.prevent="deleteinfo(scope.row)"
              type="text"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row>
      <el-col :span="6"
        ><div>
          <div style="margin: 20px 0 20px 0;float: left">
            <el-button @click="addNewTeacher">新增教师信息</el-button>
          </div>
        </div></el-col
      >
      <el-col :span="18"
        ><div style="padding:19px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="allItems.length"
            style="text-align: center; margin-top:10px"
          >
          </el-pagination></div
      ></el-col>
    </el-row>
    <addNewTeacherDialog ref="addTeacher" @flash="searchAgain"/>
    <modifyTeacherDialog ref="modifyTeacher" @flash="searchAgain"/>
  </div>
</template>

<script>
import addNewTeacherDialog from "./addNewTeacherDialog";
import modifyTeacherDialog from "./modifyTeacherDialog";
export default {
  components: { addNewTeacherDialog, modifyTeacherDialog },
  data() {
    return {
      currentPage: 1, // 当前页数
      pageSize: 9, // 表的行数
      items: [], // 当前页面的所有数据项
      // 总数据项
      allItems: [
        // {
        //   teacherId: "222222",
        //   name: "周晓升",
        //   male: "男",
        //   departmentName: "法学院",
        //   academicTitle: "讲师",
        //   phoneNumber: "13600000000",
        // },
      ],
    };
  },
  methods: {
    searchAgain(){
      this.$emit("searchAgain");
    },
    //删除
    deleteinfo(item) {
      let option = {
        teacherId: item.teacherId,
      };
      var _this = this;
      this.$http.post(this.$api.TeacherDeleteInfo, option).then((resp) => {
        if (resp.success) {
          _this.$myMessage.success(this, "删除成功！");
          _this.$emit("searchAgain");
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 修改单行教师
    modify(item) {
      let temp = JSON.parse(JSON.stringify(item));
      delete temp.departmentName;
      temp.male = temp.male == "男" ? true : false;
      this.$refs.modifyTeacher.teacherInfo = temp;
      this.$refs.modifyTeacher.dialogVisible = true;
    },

    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.items = this.allItems.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    addNewTeacher() {
      this.$refs.addTeacher.dialogVisible = true;
    },
  },
  mounted() {
    // 挂载时载入当前学生数，看情况要不要
    this.handleCurrentChange(this.currentPage);
  },
};
</script>

<style lang="less" scoped></style>
